[影片教學] Nuxt 3 安裝與使用 Tailwind CSS

2023 iThome 鐵人賽

DAY 4

影片教學

Nuxt 3 快速入門系列第 4 篇

15th鐵人賽 nuxt 3 nuxt3 vue vue.js

Ryan

2023-09-19 20:37:12

2220 瀏覽

分享至

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】
📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜尋引擎最佳化》
👀 Nuxt v4 內容與範例也可以參考並購買本系列文筆著所著書籍
📦 預計於 2025/08/14 出版，目前天瓏書局預購有 7️⃣8️⃣ 折優惠
👉 點此前往購買：https://pse.is/7yulwm

注意：Nuxt 4 已於 2025/07/16 釋出，本文部分內容或範例可能和最新版本有所不同

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

設置 Tailwind CSS 環境

安裝 Nuxt Tailwind 模組

npm install -D @nuxtjs/tailwindcss

配置使用 Nuxt Tailwind 模組

修改專案目錄下 nuxt.config.ts 檔案

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

配置 Tailwind Coinfig 設定檔

專案目錄下建立 tailwind.config.js 檔案

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.{js,ts}',
    './plugins/**/*.{js,ts}',
    './utils/**/*.{js,ts}',
    './{App,app}.{js,ts,vue}',
    './{Error,error}.{js,ts,vue}',
    './app.config.{js,ts}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

使用 Tailwind CSS

編輯 app.vue 檔案

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-blue-600">2023 iThome</h1>
      <p class="mt-4 text-9xl font-bold">鐵人賽</p>
    </div>
  </div>
</template>

VS Code 插件

Tailwind CSS IntelliSense 插件

設置 Prettier 環境

安裝 Tailwind x Prettier 插件

npm install -D prettier-plugin-tailwindcss

配置 Prettier 設定檔案

專案目錄下建立 .prettierrc.cjs 檔案

module.exports = {
  plugins: [
    'prettier-plugin-tailwindcss'
  ],
  printWidth: 100,          // 每行文字數量達 100 字元就換到新的一行
  semi: false,              // 每個語句的結尾不需要分號
  singleQuote: true,        // 字串使用單引號，而不是雙引號
  trailingComma: 'none'     // 如 Object、Array 內的元素不需要尾隨逗號
}